<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>员工信息</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      table {
        border-collapse: collapse;
        width: 700px;
        height: 400px;
        border: 1px solid skyblue;
      }

      caption {
        font-size: 20px;
        margin: 20px 0;
      }

      tr,
      th,
      td {
        text-align: center;
        border: 1px solid skyblue;
      }

      .total span {
        margin-right: 30px;
      }
    </style>
  </head>
  <body>
    <table>
      <!-- <caption>
        员工信息
      </caption>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>部门</th>
        <th>电话</th>
        <th>工号</th>
        <th>操作</th>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td><a href="#">删除</a> <a href="#">修改</a></td>
      </tr> -->
    </table>
  </body>
  <script>
    const mapRes = {
      1: '总裁办',
      2: '秘书',
      3: '前端开发',
    }
    const res = [
      {
        phone: '18730602211',
        name: '章三',
        departmentCode: 1,
        workNumber: '900222',
      },
      {
        phone: '18730602212',
        name: '李四',
        departmentCode: 2,
        workNumber: '900221',
      },
      {
        phone: '18730602213',
        name: '王武',
        departmentCode: 3,
        workNumber: '900211',
      },
      {
        phone: '18730602214',
        name: '张张',
        departmentCode: 1,
        workNumber: '900199',
      },
    ]
    const newArr=res.map(item=>{
      if(item.departmentCode===1){
         for(let k in item){
            item.depart='总裁办'
         }
         return item
      }
      if(item.departmentCode===2){
        for(let k in item){
          item.depart='秘书'
         }
         return item
        
      }
      if(item.departmentCode===3){
        for(let k in item){
          item.depart='前端开发'
         }
         return item
      }
    })
    console.log(newArr);
    const table = document.querySelector('table');
    function render(){
      let str=`<caption>
        员工信息
      </caption>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>部门</th>
        <th>电话</th>
        <th>工号</th>
        <th>操作</th>
      </tr>`
      table.innerHTML=''
      table.innerHTML=str+ newArr.map((item,index)=>{
      
        return ` <tr>
        <td>${index+1}</td>
        <td>${item.name}</td>
        <td>${item.depart}</td>
        <td>${item.phone}</td>
        <td>${item.workNumber}</td>
        <td><a href="#">删除</a> <a href="#">修改</a></td>
      `
      }).join('')
      console.log(table);
    }
    render()
  
  
  
   
  </script>
</html>
